<ul>
    <li><a href="{{ site_url }}" class="contrast">{{ blog_name_en }}</a></li>
</ul>
<ul>
    <li>
        <details role="list" dir="rtl">
            <summary aria-haspopup="listbox" role="link" class="contrast">Theme</summary>
            <ul role="listbox">
                <li><a href="#" data-theme-switcher="auto">Auto</a></li>
                <li><a href="#" data-theme-switcher="light">Light</a></li>
                <li><a href="#" data-theme-switcher="dark">Dark</a></li>
            </ul>
        </details>
    </li>

    <li>
        <details role="list" dir="rtl">
            <summary aria-haspopup="listbox" role="link" class="contrast">Navigation</summary>
            <ul role="listbox">
                {% for nav in nav %}
            <li class="blog-li">
                <a href="{{ site_url }}{{ nav.url }}">
                    <i class="fa fa-{{ nav.ico }} nav-li"></i>
                    {{ nav.text }}
                </a>
            </li>
            {% endfor %}
            </ul>
        </details>
    </li>
</ul>
